<template>
  <div class="animate__animated animate__fadeInLeft">
    <el-table
      :data="menuTree"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="menuTree" label="图标" width="180">
        <template v-slot="menuTree">
          <i :class="menuTree.row.icon_class_name"></i>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="path" label="访问路径"> </el-table-column>
      <el-table-column prop="sort_order" label="排序"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "SidebarSettings",
  computed: {
    ...mapState(["menuTree"]),
  },
  methods: {
    ...mapActions(["getMenuTree"]),
  },
  created() {
    this.getMenuTree();
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
i {
  font-size: 20px;
  color: #abcdef;
}
</style>
